<!DOCTYPE html>
<html>
<head>
    <base href="/">
    <meta charset="utf-8">
    <title>在线支付</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <style>
        body {
            background-color: #f5f5f5;
            padding: 20px;
        }
        .payment-container {
            max-width: 800px;
            margin: 50px auto;
        }
        .qrcode-box {
            text-align: center;
            padding: 30px;
            background: #fff;
            border-radius: 5px;
            margin-top: 20px;
        }
        .qrcode-img {
            width: 300px;
            height: 300px;
            margin: 0 auto;
            padding: 15px;
            background: #fff;
            border: 1px solid #e6e6e6;
        }
    </style>
</head>
<body>

<div class="layui-container payment-container">
    <!-- 订单信息 -->
    <div class="layui-card">
        <div class="layui-card-header">订单信息</div>
        <div class="layui-card-body">
            <p class="layui-font-16">订单编号：<span class="layui-font-orange" id="ddbianhao">20230825123456789</span></p>
            <p class="layui-font-18">支付金额：<span class="layui-font-red" id="ddjine">￥256.00</span></p>
        </div>
    </div>

    <!-- 支付二维码 -->
    <div class="layui-card qrcode-box">
        <div class="layui-card-header">支付宝扫码支付</div>
        <div class="layui-card-body">
            <img class="qrcode-img" id="qrcode"> <!-- 替换为你的二维码地址 -->
            <p class="layui-font-14 layui-font-gray" style="margin-top: 15px;">请使用支付宝扫一扫完成支付</p>
        </div>
    </div>

    <!-- 返回按钮 -->
    <div class="layui-row" style="margin-top: 20px;">
        <div class="layui-col-md4 layui-col-md-offset4">
            <button type="button" class="layui-btn layui-btn-primary layui-btn-fluid" onclick="history.back()">返回订单</button>
        </div>
    </div>
</div>

<script src="layui/layui.all.js"></script>
<script>
    const $ = layui.$;
    const layer = layui.layer;
    layui.use(function(){
    });
    var params = new URLSearchParams(window.location.search);
    var orderid = params.get('orderid');
    function getOrder() {
        $.ajax({
            url: 'order/getMoneyByOrderid',
            data: {orderid: orderid},
            async: false,
            success: function (order) {
                $('#ddbianhao').text(order.code);
                $('#ddjine').text(order.money);
                if(order.state>0){
                    layer.msg("订单已支付，即将跳转到个人订单页", {icon: 1});
                    setTimeout(function(){
                        location.href="shopping/userinfo";
                    },1800)
                }else{
                    $.ajax({
                        url: 'order/getQR',
                        data: {orderid: orderid},
                        async: false,
                        success: function (code) {
                            $("#qrcode").attr("src", "data:image/png;base64," + code);
                        }
                    });
                }
            }
        });
    }
    getOrder();

    let stateinterval = setInterval(function(){
        $.ajax({
            url: 'order/getMoneyByOrderid',
            data: {orderid: orderid},
            // async: false,
            success: function (order) {
                if(order.state>0){
                    layer.msg("支付成功", {icon: 1});
                    clearInterval(stateinterval);
                    setTimeout(function(){
                        location.href="shopping/userinfo";
                    },1800)
                }
            }
        });
    }, 1000);
</script>

</body>
</html>
